<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="做法"
    :canFullscreen="true"
    :minHeight="0"
    @ok="handleSubmit"
  >
    <!--    <CollapseContainer >-->
    <a-card title="做法">
      <template v-for="item of cuisinePracticeListData">
        <a-radio-group v-model:value="item.cuisineSpecsIndex" button-style="solid">
          {{ item.parentKey.name }}:
          <a-space>
            <template v-for="practiceItem of item.cuisinePracticeList">
              <a-radio-button :value="practiceItem">
                <a-space>
                  <div> {{ practiceItem.practiceName }}</div>
                  <div v-if="practiceItem.money">￥{{ practiceItem.money }}</div>
                </a-space>
              </a-radio-button>
            </template>
          </a-space>
        </a-radio-group>
      </template>
    </a-card>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { CuisinePractice, SelectedCuisine } from '/@/views/restaurant/cashier/index.data';
  import { getListGroupByPid } from '/@/api/cuisine/cuisinePractice';

  const cuisinePracticeIndex = ref<CuisinePractice>(null);

  const cuisinePracticeListData = ref<any[]>([]);

  const cuisine = ref<SelectedCuisine>({});
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });

    cuisine.value = data.record;
    cuisinePracticeListData.value = await getListGroupByPid({
      cuisineId: cuisine.value.cuisineId,
    });
    // cuisineSpecsIndex.value = cuisineSpecsListData.value[0];
  });
  /*  function findIndexSpecs(practiceInde: string) {
    return cuisinePracticeListData.value.find((item) => item.id === cuisineSpecsId);
  }*/

  async function handleSubmit() {
    try {
      let cuisinePracticeName = cuisinePracticeListData.value
        .map((item) => {
          return item.cuisineSpecsIndex ? item.cuisineSpecsIndex.practiceName : null;
        })
        .join(',');

      let cuisinePractice = new CuisinePractice();
      cuisinePractice.name = cuisinePracticeName;
      //暂时放这
      cuisine.value.cuisinePractice = cuisinePractice;

      cuisine.value.practiceName = cuisinePracticeName;

      // cuisine.value.money = cuisinePractice?.money;

      setModalProps({ confirmLoading: true });
      closeModal();
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
<style lang="less" scoped>
  .background {
    background-color: @body-background;
  }
</style>
